<template>
	<view class="container">
		<view class="head">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel">
			</uni-search-bar>
			<view class="order">
				<image src="../../static/排序.png" mode="widthFix" @click="changeOrder"></image>
			</view>
		</view>

		<uni-list :border="true" v-for="user in userList">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" @click="bindClick($event,user.id)">
					<uni-list-item :title=user.name :note=user.email showArrow 
					:thumb=user.picture thumb-size="lg" />
				</uni-swipe-action-item>
			</uni-swipe-action>
		</uni-list>

		<view>
			<uni-load-more :status=status @clickLoadMore="loadMore"></uni-load-more>
		</view>

		<view>
			<uni-popup ref="popupDel" type="dialog">
				<uni-popup-dialog type="warning" cancelText="关闭" confirmText="确认" title="通知" content="是否确认删除账号!"
					@confirm="confirmDel" @close="cancelDel"></uni-popup-dialog>
			</uni-popup>
		</view>


	</view>
</template>

<script>
	
	Date.prototype.Format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, // 月份
	        "d+": this.getDate(), // 日
	        "h+": this.getHours(), // 小时
	        "m+": this.getMinutes(), // 分
	        "s+": this.getSeconds(), // 秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
	        "S": this.getMilliseconds() // 毫秒
	    };
	    if (/(y+)/.test(fmt))
	        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	            return fmt;
	}
	
	export default {
		data() {
			return {
				apiUrl: "http://localhost:8080/",
				searchValue: "",
				/* avatar:"/static/logo.png", */
				detailurl: "/pages/account/account-detail",
				userList: [],
				pageNum: 1,
				pageSize: 6,
				order: true,
				/* keyword:null, */
				count: 0,
				status: "more",
				end: false,
				options: [{
					text: '删除用户',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				nowId:0
				// confirm: false
			}
		},
		onShow() {
			this.clear();
			this.searchValue = "";
			/* this.order=true; */
			this.searchUsers();
		},
		onPullDownRefresh() {
			this.clear();
			this.searchValue = "";
			this.searchUsers();
		},
		methods: {
			search() {
				this.clear();
				this.searchUsers();
			},
			cancel() {
				this.searchValue = "";
			},
			bindClick(e, id) {
				console.log("删除用户");
				this.nowId=id;
				this.$refs.popupDel.open();
				
			},
			loadMore() {
				if (this.end) return;
				this.pageNum += 1;
				this.searchUsers();
			},
			clear() {
				this.status = "more";
				this.userList = [];
				this.pageNum = 1;
				this.count = 0;
				this.end = false;
			},
			changeOrder(){
				this.order=!this.order;
				this.clear();
				this.searchUsers();
			},
			searchUsers() {
				console.log(uni.getStorageSync('token'));
				uni.request({
					method: 'GET',
					url: this.apiUrl + 'user',
					header: {
						Authorization: uni.getStorageSync("token")
					},
					data: {
						'pageNum': this.pageNum,
						'pageSize': this.pageSize,
						'keyword': this.searchValue,
						'order': this.order
					},
					success: (res) => {
						console.log(res.data);
						let users = res.data.records;
						let size = users.length;
						for (let i = 0; i < size; i++, this.count++) {
							this.userList.push({
								"id": users[i].uid,
								"name": users[i].name,
								"email": users[i].email,
								"picture": users[i].picture
							});
						}
						if (size < this.pageSize) {
							this.end = true;
							this.status = "no-more";
						}
						uni.stopPullDownRefresh()
					},
					fail: (err) => {
						return uni.showToast({
							icon: 'loading',
							title: '请求失败'
						})
						reject(err)
					}
				})
			},
			confirmDel() {
				this.deleteAccount(this.nowId);
			},
			cancelDel(){
				this.nowId=0;
			},
			deleteAccount(id) {
				uni.request({
					method: 'DELETE',
					url: this.apiUrl + 'user/' + id,
					header: {
						Authorization: uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						this.clear();
						this.searchUsers();
						this.addOperation(id);
					},
					fail: (err) => {
						return uni.showToast({
							icon: 'loading',
							title: '请求失败'
						})
						reject(err)
					}
				})
			},
			addOperation(id){
				var time = new Date().Format("yyyy-MM-dd hh:mm:ss");
				console.log(time);
				uni.request({
						method:'POST',
						url:this.apiUrl+'operation',
						header:{
							Authorization : uni.getStorageSync("token")
							},
						data:{
							'time':time,
							'adminId':uni.getStorageSync("uid"),
							'type':"删除账号",
							'sourceId':id
						},
						success: (res) => {
							console.log(res.data);
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.head{
		display: flex;
		flex-direction: row;
	}
	.head .uni-searchbar{
		width: 85%;
	}
	.head .order{
		position: relative;
		padding-top: 18px;
	}
	.head image{
		width: 20px;
	}
	uni-list-item ::-ms-thumb{
		border-radius: 51px;
		width: 40px;
		height: 40px;
	}
</style>
